<template>
	<view class="product-detail">
		<swiper :circular="true" class="swiper" indicator-active-color="#f00" :indicator-dots="indicatorDots" :autoplay="autoplay"
		 :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<view class="swiper-item uni-bg-red">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="colors">
			<view class="colors-items" v-for="item in colorList" :key="item.id">
				<view class="colors-main" :style="{backgroundColor: item.color}"></view>
			</view>
			<view class="collect">
				<view class="imgs">
					<image src="/static/icons/collect.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="product-content">
			<view class="shop">
				<view class="shop-top">
					<view class="title">{{productData.detail_title}}</view>
					<view class="desc">{{productData.detail_desc}}</view>
				</view>
				<view class="price">{{productData.price_now | priceFilter}}</view>
			</view>
			<view class="desc-main" v-if="productData.content">
				<rich-text class="rich" :nodes="productData.content"></rich-text>
			</view>
		</view>
		<view class="buy-car">
			<view class="buy-car-main">
				<view class="kf">
					<view class="imgs">
						<image src="/static/icons/kf.png" mode=""></image>
					</view>
					<view class="title">客服</view>
				</view>
				<view class="right">
					<view class="add-car" @tap="addClick">添加到购物车</view>
					<view class="add-car buy-cars" @tap="buyClick">立即购买</view>
				</view>
			</view>
		</view>
		<view class="mask-contents" v-if="isShow" @tap="maskClick">
			<view class="mask" @tap.stop="">
				<view class="mask-main">
					<view class="mask-top">
						<view class="imgs">
							<image :src="bannerList[currentIndex] || routerImg" mode=""></image>
						</view>
						<view class="mask-top-right">
							<view class="title">{{productData.detail_title || '单人沙发'}}</view>
							<view class="count">库存数量: {{ 99}}</view>
						</view>
						<view class="close" @tap="closeClick">
							<image src="/static/icons/x.png" mode=""></image>
						</view>

					</view>
					<view class="color-category">
						<view class="title">颜色分类</view>
						<view class="colors">
							<view class="items" 
							v-for="(item, index) in colorList" 
							:key="item.id" @tap="colorClick(item)" 
							:class="currentIndex == index ? 'colorsactive' : ''">
							{{item.color_text}}
							</view>
						</view>
					</view>
					<view class="mask-serice">
						<view class="title">特色服务</view>
						<view class="desc">送货上门</view>
						<view class="desc ">上门安装</view>
					</view>
					<view class="buy-count">
						<view class="title">购买数量</view>
						<view class="rights">
							<view class="decrements" @tap="decrementClick">-</view>
							<view class="count">{{count}}</view>
							<view class="increments" @tap="incrementClick">+</view>
						</view>
					</view>
					<view class="btns" @tap="confimClick">确定</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		getProductDetail
	} from '@/network/product/index.js'
	import {
		getAddCart,
		getCartList
	} from '@/network/cart/index.js'
	// 插件
	// import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	// import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				productId: '',
				bannerList: [],
				productData: {},
				colorList: [],
				isShow: false,
				count: 1,
				currentIndex: 0,
				isBuy: false,
				routerImg: '',
				indicatorDots: true, // 是否显示指示板小点
				autoplay: true, // 是否自动切换
				interval: 2000, // 自动切换时隔
				duration: 500, // 动画时长

			};
		},
		components: {
			// wybPopup
			// uniPopup,
			// uniPopupMessage,
			// uniPopupDialog
		},
		onLoad(options) {
			console.log(options.productId)
			this.productId = options.productId;
			this.getProductDetails()
			console.log(options.img)  // 没图片 只能从外面拿图片过来
			this.routerImg = options.img
			// 证明没有数据 得先添加进去  购物车接口坏了
			// getCartList({
			// 	userId: uni.getStorageSync('tokens').sessionId
			// }).then(res => {
			// 	console.log(res)
			// })
		},
		methods: {
			// 数量变化
			decrementClick() {
				if (this.count <= 1) {
					return
				} else {
					this.count--
				}
			},
			incrementClick() {
				this.count++
			},
			// 选择颜色点击
			colorClick(item) {
				let index = this.colorList.findIndex(items => items.id == item.id)
				this.currentIndex = index;

				// this.skuId = item.product_id;  // 不需要了
				console.log(item, '哈哈哈')
			},
			// 点击阴影关闭
			maskClick() {
				// console.log(123)
				this.isShow = false
			},
			// 关闭按钮
			closeClick() {
				this.isShow = false
				// console.log(12)
			},
			// 添加按钮
			addClick() {
				console.log('添加到购物车了')
				console.log(this.colorList)
				this.isShow = true
				this.isBuy = false
				// const res = await getAddCart()
			},
			// 购买按钮
			buyClick() {
				console.log('购买了')
				this.isShow = true;
				this.isBuy = true; // 判断添加购物车 还是 立即购买
			},
			confimClick() {
				console.log('确定购买了')
				if (this.isBuy) {
					// this.$store.commit('addOrder', )
					const datas = {
						userId: uni.getStorageSync('tokens').id,
						count: this.count,
						price: this.productData.price_now,
						'orderDetail[0].price': this.productData.price_now,
						// 'orderDetail[0].skuId': this.colorList[this.currentIndex].product_id, // 是产品id 不是product_id
						'orderDetail[0].skuId': this.colorList[this.currentIndex].id,
						img: this.bannerList[0],
						addressId: '',
						names: this.productData.detail_title,
						type: this.colorList[this.currentIndex].color_text,
						skuId: this.colorList[this.currentIndex].sku_code
					};
					// let names = this.productData.detail_title
					console.log(datas)
					this.$store.commit('addOrder', datas)
					const productDetail = '商品详情'
					uni.navigateTo({
						url: '/pages/product/productOrder/productOrder?type=' + productDetail
					})
					this.isBuy = false
					this.isShow = false
				} else {
					// 添加到购物车
					// console.log(this.colorList[this.currentIndex].sku_code || 1055534, '编号')
					console.log(this.bannerList[this.currentIndex], '图片')
					console.log((this.productData.price_now / 100), '价格')
					console.log(this.count, '数量')
					// 解决数据丢失报的bug
					let skuID = '';
					if (this.colorList.length == 0) {
						skuID = 1055534
					} else {

						skuID = this.colorList[this.currentIndex].sku_code
					}
					console.log(skuID)
					const lejuCar = {
						title: this.productData.detail_title,
						sku_code: skuID,
						price: this.productData.price_now,
						count: this.count,
						img: this.bannerList[this.currentIndex] || this.routerImg,
						id: this.colorList[this.currentIndex].id
					}

					// uni.setStorageSync('lejuCar', buyCarList)
					let buyCarList = uni.getStorageSync('lejuCar')
					console.log(Boolean(buyCarList))
					// 逻辑判断
					if (!buyCarList) {
						const arr = [];
						arr.push(lejuCar)
						uni.setStorageSync('lejuCar', arr)

					} else {
						console.log(buyCarList, '哈哈哈2')
						buyCarList.push(lejuCar)
						const arr1 = [];
						
						
						// 如果有去重需要的话就走这个逻辑  目前没有这个需求
						// for (let i = 0; i < buyCarList.length; i++) {
						// 	for (let j = i + 1; j < buyCarList.length; j++) {
						// 		if (buyCarList[i].title == buyCarList[j].title) {
						// 			buyCarList[i].count+=this.count
						// 			buyCarList.splice(j, 1);
						// 			j--
						// 		}
						// 	}
						// }
						// console.log(buyCarList, '去重后的')
						// 分割线
						uni.setStorageSync('lejuCar', buyCarList)
						console.log(buyCarList, '哈哈哈')
					}
					uni.showToast({
						title: '添加购物车成功'
					})
					this.isShow = false
					






					// console.log(this.productData)
				}


			},

			// 网络接口
			async getProductDetails() {
				const res = await getProductDetail({
					productId: this.productId
				});
				console.log(res, 12)
				this.productData = res.data.data;
				if (res.data.data.imgs) {
					this.bannerList = res.data.data.imgs.split(',');
				}
				this.colorList = res.data.data.skuList
				console.log(this.bannerList)
			}
		},
		filters: {
			priceFilter(val) {
				return '¥ ' + (val / 100).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-detail {
		background-color: #F1ECE7;
		// height: 100%;
		height: 100vh;
		overflow: auto;

		.desc-main {
			padding: 60rpx 0;
			// width: 100px;
			margin-bottom: 40rpx;
			overflow: hidden;

			::v-deep img {
				// 样式穿透
				width: 100%;
				height: 100%;
			}
		}
	}

	.colorsactive {
		border: 4rpx solid #354E44;
	}

	.buy-car {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;

		background-color: #fff;

		.buy-car-main {
			padding: 0 0 0 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.kf {
			display: flex;
			flex-direction: column;
			align-items: center;

			.imgs {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				font-size: 24rpx;
			}
		}

		.right {
			width: 476rpx;
			line-height: 98rpx;
			display: flex;
			align-items: center;

			.add-car {
				display: flex;
				justify-content: center;
				width: 50%;
				background-color: #E2E2E2;
				color: #8F8F94;
			}

			.buy-cars {

				background-color: #354E44;
				color: #fff;
			}
		}
	}

	.swiper {
		height: 634rpx;

		.swiper-item {
			width: 100%;
			height: 634rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.mask-contents {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .6);
		z-index: 3;

		.mask {
			position: absolute;
			left: calc(50% - 314rpx);
			top: calc(50% - 420rpx); // 463
			z-index: 1;
			width: 628rpx;
			height: 926rpx;

			border-radius: 40rpx;
			background-color: #fff;

			.mask-main {
				padding: 0 60rpx 60rpx;

				.buy-count {
					display: flex;
					justify-content: space-between;

					.title {
						font-weight: 700;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.rights {
						display: flex;

						.decrements,
						.increments {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #F1ECE7;
						}

						.count {
							width: 90rpx;
							height: 60rpx;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 0 10rpx;
							background-color: #F1ECE7;
						}
					}
				}

				.btns {
					width: 208rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 48rpx auto;
					background-color: #354E44;
					color: #fff;
					border-radius: 32rpx;
				}

				.mask-serice {
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #F2F4F3;
					margin-bottom: 32rpx;

					.title {
						font-weight: 700;
						margin: 20rpx 0;
						font-size: 28rpx;
					}

					.desc {
						border-radius: 16rpx;
						background-color: #F2F4F3;
						margin: 16rpx 0;
						// padding-left: 10rpx;
						padding: 10rpx 40rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
					}
				}

				.color-category {
					margin-bottom: 18rpx;

					.title {
						font-weight: 700;
						margin: 20rpx 0;
						font-size: 28rpx;
					}

					.colors {
						display: flex;
						justify-content: space-between;

						.items {
							width: 48%;
							padding: 10rpx 0;
							text-align: center;
							background-color: #F2F4F3;
							border-radius: 32rpx;
							font-size: 28rpx;
						}
					}
				}

				.mask-top {
					display: flex;
					position: relative;

					.close {
						position: absolute;
						right: 0rpx;
						top: 50rpx;
						width: 42rpx;
						height: 42rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.imgs {
						position: relative;
						top: -60rpx;
						width: 192rpx;
						height: 192rpx;
						margin-right: 40rpx;
						border-radius: 16rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.mask-top-right {
						display: flex;
						justify-content: flex-end;
						flex-direction: column;
						margin-bottom: 40rpx;

						.title {
							font-weight: 700;
							font-size: 28rpx;
						}

						.count {
							font-size: 26rpx;
							color: #BCBCBC;
						}
					}
				}
			}

		}
	}



	.product-content {
		padding: 0 60rpx;

		.shop {
			.shop-top {
				margin-bottom: 30rpx;

				.desc {
					color: #B0B0B0;
					font-size: 28rpx;
				}
			}
		}

	}

	.colors {
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		.collect {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 90rpx;
			top: -80rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #354E44;
			box-shadow: 0 4rpx 16rpx 4rpx rgba(0, 0, 0, .3);
			z-index: 3;

			.imgs {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.colors-items {
			margin: 0 20rpx;
			width: 50rpx;
			height: 50rpx;

			.colors-main {
				height: 100%;
				border-radius: 50%;
			}
		}
	}
</style>
